<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>旺盛的前端组件库</title>
</head>
<style>
    :root{
        --bk:#fff;
    }
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        width: 100%;
        height: 100vh;
        background-color: #2b2b2b;
        display: flex;
    }
    .cloud{
        width: 320px;
        height: 80px;
        background-color: var(--bk);
        border-radius: 50px;
        margin: auto;
        position: relative;
    }
    .cloud::after{
        content: "";
        width: 100%;
        height: 10px;
        background-color: #b0aaaa;
        border-radius: 50%;
        position: absolute;
        bottom: -150px;
    }
    .clouds{
        width: 90px;
        height: 90px;
        background-color: var(--bk);
        border-radius: 50%;
        position: absolute;
        top: -50px;
        left: 50px;
    }
    .clouds::after{
        content: "";
        width: 130px;
        height: 130px;
        background-color: var(--bk);
        position: absolute;
        border-radius: 50%;
        left: 80px;
        top: -30px;
    }
    .rain{
        /* width: 100%; */
        display: flex;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%);
    }
    .rain span{
        width: 15px;
        height: 15px;
        border-radius:50%;
        margin: 0 5px;
        background-color:#fff;
        animation: animate linear 2s infinite;
        animation-duration: calc(var(--i)*2s);
    }
    @keyframes animate{
        0%{
            transform: translateY(0) scale(0);
        }
        100%{
            transform: translateY(170px) scale(1);
        }


    }
</style>
<body>
    <div class="cloud">
        <div class="clouds"></div>
        <div class="rain" id="rain">

        </div>
    </div>
</body>
<script>
    var rain = document.querySelector('#rain')
    for (let i = 0; i < 10; i++) {
        let rains = document.createElement('span');
        rains.style = `--i:${Math.random()}`;
        rain.append(rains)
    }

</script>
</html>